<div class="container">

    <div class="row" ng-if="errorMessage != null">
        <div class="alert alert-success">{{successMessage}}</div>
    </div>

    <div class="row">
        <!-- FORM for creating new game -->
        <div class="col-md-6">
            <h2 class="lead">New game</h2>
            <form name="createNewBoard" class="form-horizontal" novalidate ng-submit="createNewGame()">

                <div class="form-group">
                    <label for="gameName" class="col-md-2 control-label">Game Name:</label>
                    <div class="col-md-8">
                        <input type="text" id="gameName" name="gameName" class="form-control"  placeholder="gameName" required ng-model="newGameData.gameName">
                    </div>
                </div>

                <div class="form-group">
                    <label for="playerNumber" class="col-md-2 control-label">Player Number:</label>
                    <div class="col-md-8">
                        <input type="text" id="playerNumber" name="playerNumber" class="form-control"  placeholder="playerNumber" required ng-model="newGameData.playerNumber">
                    </div>
                </div>


                <!--<div class="form-group">-->
                    <!--<label for="gameType" class="col-md-2 control-label">Game Type:</label>-->
                    <!--<div class="col-md-8">-->
                        <!--<select required class="form-control" name="gameType" id="gameType"-->
                                <!--ng-model="newGameData.gameType">-->
                            <!--<option ng-repeat="option in newGameOptions.availableGameTypes" value="{{option.name}}">{{option.name}}</option>-->
                        <!--</select>-->

                    <!--</div>-->
                <!--</div>-->

                <div class="form-group">
                    <div class="col-sm-offset-4 col-sm-6" style="padding-bottom:50px">
                        <button type="submit" class="btn btn-md btn-primary" ng-disabled="createNewGame.$invalid">
                            <span class="glyphicon glyphicon-plus"></span> New Game </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- JOIN EXISITNG GAME -->


        <!-- PLAYER GAMES -->
        <div class="col-md-6" ng-controller="playerGamesController">

            <table class="table table-hover table-striped table-condensed" ng-show="playerGames.length">
                <h2 class="lead">My games</h2>
                <thead>
                <td>Game Name</td>
                <td>Started player</td>
                <td>Second player</td>
                <td>Game status</td>
                <td>Created</td>
                <td></td>
                </thead>
                <tbody>
                <tr ng-repeat="game in playerGames">
                    <td><a href="#/gwtgame/{{game.gameName}}">{{game.gameName}}</a></td>
                    <td>{{game.firstPlayer.userName}}</td>
                    <td>
                        <span ng-if="!game.player.userName">
                            COMPUTER
                        </span>
                        <span ng-if="game.player.userName != ''">
                            {{game.secondPlayer.userName}}
                        </span>
                    </td>
                    <td>{{game.gameStatus}}</td>
                    <td>{{game.created | date:'MM-dd-yyyy HH:mm:ss'}}</td>
                    <td>
                        <button class="btn btn-sm" ng-click="loadGame(game.id)">
                            <span class="glyphicon glyphicon-plus"></span> Load game </button>
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>

            <div ng-show="!playerGames.length">
                No games.
            </div>

        </div>

    </div>

</div>
